@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        let footer = new Vue({
            el:'#app',
            data:function(){
                return {
                    title: "快讯",
                    listData: [],
                    pageData: {!! $lists !!},
                    finished: false,//是否已加载完成，加载完成后不再触发load事件
                    loading: false,//加载loading开关
                    params:{page : 2},
                };
            },
            created(){
                this.listData = this.pageData.data;
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.index.index') }}";
                },
                list() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.live.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            that.listData = that.listData.concat(res.data.data);
                            if((that.pageData.last_page == 1) || (that.params.page == that.pageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
            },
        });
    </script>
@endsection
@section('content')
    <div class="container main">
        <div class="row">
            <div id="app" class="info-bar live" v-cloak>
        <van-nav-bar
                :title="title"
                left-text=""
                border
                fixed="true"
                left-arrow="false"
                @click-left="onClickLeft">
            <van-icon name="arrow-left" slot="left"/>
        </van-nav-bar>
        <div class="col-xs-12">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="list">
                <ul v-for="item in listData">
                    <li>
                        <div class="live-date">
                            <div class="date-info1">
                                <span class="date-month">@{{ moment(item.created_at).format('MM') }}月</span>
                                <span class="date-day">@{{ moment(item.created_at).format('DD') }}日</span>
                            </div>
                            <div class="date-info2">
                                <span class="date-week">@{{ item.week }}</span>
                            </div>
                        </div>
                    </li>
                    <li v-for="child in item.child" class="live-xian">
                        <div class="live-cont">
                            <div class="cont-info1">
                                <i class="fa fa-circle"></i>
                            </div>
                            <div class="cont-info2">
                                <p class="live-cont">@{{ moment(child.created_at).format('HH:mm') }}</p>
                                <p class="live-cont">@{{ child.content }}</p>
                                <p class="live-source">来源：@{{ child.source }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
        </div>
    </div>
@endsection